import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {Helper} from './Helper';
import {Link} from '../Link/Link';
import * as Icons from '../../icons';
import {Scrollable, Content} from '../../storybook/PreviewGallery';

<Meta
  title="Components/Helper"
  component={Helper}
  argTypes={{
    children: {control: {type: 'text'}},
    icon: {
      control: {type: 'select'}, options: [undefined, ...Object.keys(Icons)],
      table: {type: {summary: 'ReactElement<IconProps>'}},
    },
  }}
  args={{
    children:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    level: 'info',
    icon: undefined,
  }}
/>

# Helper

## Usage

Allows to help the user by pushing contextual information.

## General guidance

It informs the user about :

- The features of the section.
- The information expected in the field.
- An alert on the information filled in by the user.
- An error related to the information filled in by the user.

## Playground

Use this playground to test the helper component

<Canvas>
  <Story name="Standard">
    {args => {
      return (
        <Helper {...args} icon={undefined === Icons[args.icon] ? undefined : React.createElement(Icons[args.icon])} />
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Composition

When more information can be found in another page, Helper is combined with Link component.

<Canvas>
  <Story name="Composition">
    {args => {
      return (
        <Helper level="info">
          {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.Suspendisse lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi,
non fermentum diam nisl sit amet erat. `}
          <Link target="_blank" href="https://www.akeneo.com/">
            Link to related lorem ipsum
          </Link>
        </Helper>
      );
    }}
  </Story>
</Canvas>

## Variation on level

<Canvas>
  <Story name="Level">
    {args => {
      return (
        <>
          <Helper {...args} level="info">
            You might need to read this. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} level="warning">
            There is a warning. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} level="error">
            There is an error. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} level="success">
            There is a success. <Link href="#">Link</Link>
          </Helper>
        </>
      );
    }}
  </Story>
</Canvas>

## Inline

<Canvas>
  <Story name="Inline">
    {args => {
      return (
        <>
          <Helper {...args} inline={true} level="info">
            You might need to read this. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} inline={true} level="warning">
            There is a warning. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} inline={true} level="error">
            There is an error. <Link href="#">Link</Link>
          </Helper>
          <Helper {...args} inline={true} level="success">
            There is a success. <Link href="#">Link</Link>
          </Helper>
        </>
      );
    }}
  </Story>
</Canvas>

## Sticky

<Canvas>
  <Story name="Sticky">
    {args => {
      return (
        <Scrollable height={300}>
          <Helper level="warning" sticky={0}>
            This is a sticky helper.
          </Helper>
          <Content height={500}>Some content</Content>
        </Scrollable>
      );
    }}
  </Story>
</Canvas>

## With custom Icon

<Canvas>
  <Story name="Custom Icon">
    {args => {
      return (
        <>
          <Helper {...args} level="info" icon={<Icons.BrokenLinkIcon />}>
            Info
          </Helper>
          <Helper {...args} level="warning" icon={<Icons.MegaphoneIcon />}>
            Warning
          </Helper>
          <Helper {...args} level="error" inline={true} icon={<Icons.UnviewIcon />}>
            Error level and inline
          </Helper>
          <Helper {...args} level="success" inline={true} icon={<Icons.MailIcon />}>
            Success level and inline
          </Helper>
        </>
      );
    }}
  </Story>
</Canvas>

## Related components

<ul>
  <li>
    <LinkTo kind="Components/Information" story="Standard">
      Information
    </LinkTo>
  </li>
  <li>
    <LinkTo kind="Components/Link" story="Standard">
      Link
    </LinkTo>
  </li>
</ul>
